<template>
  <div class="container">
    <TitleBox></TitleBox>  
    <div class="help-container">
      <div class="help-main">
        <ul>
          <li>
            <div class="lists-main flex-box">
              <p>我的余额如何提现：</p>
              <span class="toggle-btn"><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzheng-jiantou"></use>
                </svg></span>
            </div>
            <div class="lists-desc">
              <div class="lists-desc-main">
                <p>1.选择“银行卡”，这个银行卡是收款用的，可以是借记卡，也可以是信用卡。 填写金额，完毕后进入下一步。</p>
                <p>2.输入“支付密码”，这个密码是在微信里面设置的，有别于银行卡的密码，切记。</p>
                <p>3.输入“支付密码”后，如成功，会跳转至“提现申请已提交”界面；如果错误，会出现“提现失败”的说明，点击“完成”，自动跳转至钱包页面。</p>
              </div>
            </div>
          </li>
          <li>
            <div class="lists-main flex-box">
              <p>我的余额如何提现：</p>
              <span class="toggle-btn"><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzheng-jiantou"></use>
                </svg></span>
            </div>
            <div class="lists-desc">
              <div class="lists-desc-main">
                <p>1.选择“银行卡”，这个银行卡是收款用的，可以是借记卡，也可以是信用卡。 填写金额，完毕后进入下一步。</p>
                <p>2.输入“支付密码”，这个密码是在微信里面设置的，有别于银行卡的密码，切记。</p>
                <p>3.输入“支付密码”后，如成功，会跳转至“提现申请已提交”界面；如果错误，会出现“提现失败”的说明，点击“完成”，自动跳转至钱包页面。</p>
              </div>
            </div>
          </li>
          <li>
            <div class="lists-main flex-box">
              <p>我的余额如何提现：</p>
              <span class="toggle-btn"><svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-wenzheng-jiantou"></use>
                </svg></span>
            </div>
            <div class="lists-desc">
              <div class="lists-desc-main">
                <p>1.选择“银行卡”，这个银行卡是收款用的，可以是借记卡，也可以是信用卡。 填写金额，完毕后进入下一步。</p>
                <p>2.输入“支付密码”，这个密码是在微信里面设置的，有别于银行卡的密码，切记。</p>
                <p>3.输入“支付密码”后，如成功，会跳转至“提现申请已提交”界面；如果错误，会出现“提现失败”的说明，点击“完成”，自动跳转至钱包页面。</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TitleBox from '../components/TitleBox.vue'
export default {
  name: 'home',
  data() {
    return {
      lists: ''
    }
  },
  components: {
    TitleBox
  },
  computed: {},
  methods: {},
  mounted() {
    var state = 0
    $('.toggle-btn').click(function() {
      var displaySet = $(this)
        .parents('li')
        .find('.lists-desc')
        .css('display')
      state = displaySet === 'none' ? 0 : 1
      var thisBox = $(this)
        .parents('li')
        .find('.lists-desc')
      if (state === 0) {
        thisBox.slideDown(200)
        state = 1
      } else {
        thisBox.slideUp(200)
        state = 0
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.help-container {
  max-width: 750px;
  margin: 0 auto;
  padding-left: r(15);
  padding-right: r(15);
  box-sizing: border-box;
  ul {
    width: 100%;
    display: block;
    overflow: hidden;
    li {
      width: 100%;
      .lists-main {
        width: 100%;
        height: r(52);
        justify-content: space-between;
        -webkit-justify-content: space-between;
        border-bottom: 1px solid #dedede;
        p {
          font-size: r(16);
          color: #333333;
        }
        span {
          color: #999;
          font-size: r(18);
          transform: rotateZ(90deg);
          -webkit-transform: rotateZ(90deg);
          transition: 0.25s ease;
          -webkit-transition: 0.25s ease;
        }
      }
      .lists-desc {
        width: 100%;
        display: none;
        // transition: 0.25s ease;
        // -webkit-transition: 0.25s ease;
        .lists-desc-main {
          width: 100%;
          padding-top: r(10);
          padding-bottom: r(10);
          p {
            font-size: r(12);
            color: #999999;
            line-height: r(20);
          }
        }
      }
    }
  }
}
</style>
